<template>
  <div class="common-layout">
    <el-container class="container">
      <el-aside class="aside">
        <img style="width: 160px;height: 40px;margin-bottom: 25px;" src="./assets/images/logo.png" alt="">
        <div class="aside-divder" @click="toggleMenu(0)" :class="{'active': $route.path === '/'}">
          <span>AI备课</span>
          <img style="width: 40px;" src="./assets/images/Snipaste_2024-01-09_15-58-47.png" alt="">
        </div>
        <div class="aside-divder" @click="toggleMenu(1)" :class="{'active': $route.path === '/kejianku'}">
          <span>AI课件库</span>
          <img style="width: 40px;" src="./assets/images/Snipaste_2024-01-09_15-58-47.png" alt="">
        </div>
        <div class="aside-divder" @click="toggleMenu(2)" :class="{'active': $route.path === '/yunkongjian'}">
          <span>我的云空间</span>
          <img style="width: 40px;" src="./assets/images/Snipaste_2024-01-09_15-58-47.png" alt="">
        </div>
      </el-aside>
      <el-container>
        <el-main class="main"><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()
const count = ref(0)

function toggleMenu(index) {
  count.value = index
  switch (index) {
    case 0:
      router.push('/')
      break;
    case 1:
      router.push('/kejianku')
      break;
    case 2:
      router.push('/yunkongjian')
      break;
  }
}
</script>


<style setup>
.common-layout {
  height: 100vh;
}

.container {
  height: 100%;
}

.aside {
  background-image: url("./assets/images/bgleft@2x.png");
  background-repeat: no-repeat;
  /* 铺满 */
  background-size: cover;
  color: #67c23a;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 15px;
}

.main {
  background-image: url("./assets/images/bg@2x.png");
  color: #303133;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.aside-divder {
  width: 230px;
  height: 50px;
  border: 1px solid #999;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: blue;
  background-color: #fff;
  margin-bottom: 10px;
}

.aside-divder.active {
  border: 2px solid #1890ff;
  box-shadow: 0 0 5px #1890ff;
}
</style>
